<#include "../layout/layout.ftl">
<@layout>
    <input id="active-menu-url" type="hidden" value="${request.contextPath}/admin/tunnel/list.html"/>
    <div class="row wrapper border-bottom white-bg page-heading">
        <div class="col-sm-4">
            <h2>隧道</h2>
            <ol class="breadcrumb">
                <li class="breadcrumb-item">
                    <a href="javascript:void(0);">隧道</a>
                </li>
                <li class="breadcrumb-item active">
                    <strong>我的隧道</strong>
                </li>
            </ol>
        </div>
    </div>

    <div class="wrapper wrapper-content">
        <div class="row">
            <div class="col-lg-12">
                <div class="ibox">
                    <div class="ibox-title">
                        <h5>隧道列表</h5>
                        <a id="addTunnelBtn" href="javascript:void(0);" class="btn btn-primary btn-xs">新增隧道</a>
                    </div>
                    <div class="ibox-content">
                        <table class="table table-bordered">
                            <thead>
                            <tr>
                                <th>#</th>
                                <th>名称</th>
                                <th>隧道类型</th>
                                <th>秘钥</th>
                                <th>隧道协议</th>
                                <th>域名/端口</th>
<#--                                <th>到期</th>-->
                                <th>本月流量</th>
                                <th>在线</th>
                                <th>操作</th>
                            </tr>
                            </thead>
                            <tbody>
                            <#list dataList as item>
                                <tr>
                                    <td>${item_index+1}</td>
                                    <td>${item.name}</td>
                                    <td>${typeMap[item.type]}</td>
                                    <td>
                                        ${item.token}
                                        <a name="changeTokenBtn" data-id="${item.id}" href="javascript:void(0);"
                                           class="btn btn-warning btn-xs">
                                            更换秘钥
                                        </a>
                                    </td>
                                    <td>${protocolMap[item.protocol]}</td>
                                    <td>${item.domain}</td>
<#--                                    <td>永久</td>-->
                                    <td>0</td>
                                    <td>${onlineMap[item.online]}</td>
                                    <td>
                                        <a name="editTunnelBtn" data-id="${item.id}" href="javascript:void(0);"
                                           class="btn btn-primary btn-sm">编 辑</a>
                                    </td>
                                </tr>
                            </#list>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</@layout>
<script type="text/javascript">
    $(function () {
        $("#addTunnelBtn").click(function () {
            location.href = "${request.contextPath}/admin/tunnel/add.html";
        });

        $("a[name=editTunnelBtn]").click(function () {
            const id = $(this).data("id");
            location.href = "${request.contextPath}/admin/tunnel/" + id + "/edit.html";
        });

        $("a[name=changeTokenBtn]").click(function () {
            const id = $(this).data("id");
            const obj = {
                id: id
            };
            const index = layer.load(1, {
                shade: [0.1, "#000"]
            });
            let res = $.ajax({
                url: "${request.contextPath}/admin/tunnel/change/token/action",
                contentType: "application/json",
                type: "POST",
                dataType: "JSON",
                data: JSON.stringify(obj),
                async: false
            }).responseText;
            layer.close(index);
            res = JSON.parse(res);
            if (res.code === "200") {
                location.reload();
            } else {
                layer.alert(res.message, {
                    icon: 2,
                    skin: "layerBtn"
                });
            }
        });
    });
</script>